<template>
  <div id="app">
    <transition>
      <router-view></router-view>
    </transition>
    <!-- tab-bar 底部导航组件 -->
    <main-tab-bar />
  </div>
</template>

<script>
import MainTabBar from '@/common/tabBar/MainTabBar'
export default {
  name: 'App',
  components: {
    MainTabBar
  }
}
</script>
<style>
  #app {
    overflow-x: hidden
  }
  .v-enter {
    transform: translateX(100%);
    opacity: 0;
  }
  .v-enter-active, .v-leave-active {
    transition: all .5s ease;
  }
  .v-leave {
    transform: translateX(-100%);
    opacity: 0;
    position: absolute;
  }
</style>
